<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import scroll from '../widget.scroll.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Timeline',
        remark: '时间轴',
        extends: [scroll],
        attrs: [{
          name: 'vertical',
          type: 'Boolean',
          remark: '是否垂直布局',
        }, ],
        slots: [{
          name: 'default',
          remark: 'TimelineItem的集合',
          option: 'w-timeline-item'
        }, ],
        examples: [{
          remark: '横向显示时间轴',
          type: 'html',
          view: true,
          code: `
            <w-timeline>
              <w-timeline-item>商品已经下单</w-timeline-item>
              <w-timeline-item>卖家已发货</w-timeline-item>
              <w-timeline-item>包裹正在等待揽收</w-timeline-item>
            </w-timeline>
            `
        }, {
          remark: '纵向并且左右交替排版',
          type: 'html',
          view: true,
          code: `
            <w-timeline :vertical="true">
              <w-timeline-item>商品已经下单 2015-09-01</w-timeline-item>
              <w-timeline-item position="right">卖家已发货 2015-09-01</w-timeline-item>
              <w-timeline-item>包裹正在等待揽收 2015-09-01</w-timeline-item>
            </w-timeline>
            `
        }, {
          remark: '自定义图标',
          type: 'html',
          view: true,
          code: `
            <w-timeline>
              <w-timeline-item position="bottom" align="center" line-color="lightcoral">
                <template #icon>
                  <div style="border:2px solid lightcoral;border-radius:30px;padding:15px 5px;background:#fff;font-size:16px;color:lightcoral;">2023</div>
                </template>
                <div>去年小目标</div>
              </w-timeline-item>
              <w-timeline-item position="bottom" align="center" line-color="#ddd">
                <template #icon>
                  <div style="border:2px solid lightcoral;border-radius:30px;padding:8px;background:#fff;color:lightcoral;">
                    <i class="f-i f-i-mail" style="font-size:30px;"></i>
                  </div>
                </template>
                <div>赚一个亿</div>
              </w-timeline-item>
              <w-timeline-item position="bottom" align="center">
                <template #icon>
                  <div style="border:2px solid #ddd;border-radius:30px;padding:15px 5px;background:#fff;font-size:16px;color:#aaa;">2025</div>
                </template>
                <div>明年大目标</div>
              </w-timeline-item>
            </w-timeline>
            `
        }]
      }
    },

  }
</script>

<style>
</style>
